<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .header,
        .footer {
            width: 1200px;
            margin: 0 auto;
            background-color: skyblue;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 50px;
            height: 120px;
            color: #fff;
        }

        .footer {
            height: 300px;
        }

        ul,
        li {
            list-style: none;
        }

        ul {
            width: 1200px;
            display: flex;
            flex-wrap: wrap;
            margin: 0 auto;
            justify-content: space-between;
            padding-top: 10px;
        }

        li {
            width: 290px;
            border: 1px solid #333;
            margin-bottom: 10px;
            padding: 5px;
            box-sizing: border-box;
        }

        li>a>img {
            width: 278px;
            height: 274px;
            display: block;
        }

        .pagination {
            width: 1200px;
            margin: 10px auto;
            height: 50px;
            display: flex;
            align-items: center;
        }

        .pagination>.prev,
        .pagination>.next {
            width: 50px;
            height: 30px;
            cursor: pointer;
            background-color: orange;
            font-size: 24px;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .pagination>.disable {
            cursor: not-allowed;
            background-color: #ccc;
        }

        .pagination>.total {
            font-size: 30px;
            font-weight: 700;
            margin: 0 20px;
        }

        .pagination>select {
            font-size: 22px;
            padding-left: 20px;
            margin-left: 30px;
        }
    </style>
    <script src="js/data.js"></script>
</head>

<body>

    <div class="header">网页头部</div>
    <div class="pagination">
        <span class="prev disable">&lt;</span>
        <span class="total">1 / 100</span>
        <span class="next">&gt;</span>
        <select>
            <option value="4">4</option>
            <option value="8">8</option>
            <option value="12">12</option>
            <option value="16">16</option>
        </select>
    </div>
    <ul>


    </ul>
    <div class="footer">网页底部</div>
    <script>
        /* json转js格式  
        JSON.parse();
        
        js转json格式 
        JSON.stringfy()
        // 每页显示多少条 程序员决定 
        // 总共多少条 可以获取到  
        // 用户先看第几页  用户决定  用户告诉我想看第几页 

        // 用户想看第8页 我们应该从数组中截取第八页的数据 
        // 第八页 应该是从哪个下标 到哪个下标 
        // 找规律 


        // 每页显示4条
        // 第几页  每页的条数     从第几截取到第几 
        // 1       4            0 ~ 3 
        // 2       4            4 ~ 7 
        // 3       4            8 ~ 11 
        // n       4            (第n页-1)*每页的条数 ~ 第几页*每页的条数-1
        // 截取数据的时候 不能影响原数组 
        // splice(1,3)  slice(开始的索引,到结束的索引)
        // slice((第n页-1)*每页的条数,第几页*每页的条数)


                                

        //[{},{},{},{},.....]
        */
        function second_to_minute(s) {
            return `${parseInt(s / 60)}分${s % 60}秒`
        }

        function timestamp_to_time(stamp) {
            var date = new Date(stamp);
            var year = date.getFullYear() + "-";
            var month =
                (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "-";
            var day = (date.getDate() < 10 ?
                "0" + date.getDate() : date.getDate()) + " ";
            var hour = date.getHours() + ":";
            var minute = date.getMinutes() + ":";
            var second = date.getSeconds();
            return year + month + day + hour + minute + second;
        }


        var newdata = JSON.parse(data);
        // 数据显示区域获取
        var contentBox = document.querySelector('.total');
        //上一页按钮 
        var prevBtn = document.querySelector('.prev');
        // 下一页按钮 
        var nextBtn = document.querySelector('.next');

        // 获取下拉框 
        var selectBtn = document.querySelector('select');
        var current = 2; // 表示用户想看的页码  当前第几页
        var pagesize = 8; // 每页显示几条;
        var total = 0;
        function handle_page() {
            
            // console.log(newdata) 对象
            var videos = newdata['data']['vlist'];
            
            // console.log(videos)
            var content = document.querySelector('ul')
            var cutdata = videos.slice((current - 1) * pagesize, current * pagesize)
            content.innerHTML = cutdata.reduce(function (prev, item) {
                return prev +
                    `<li>
                <a href="${item.vurl}"><img src="${item.vpic}" alt=""></a>
                <p>标题:${item.shortTitle}</p>
                <p>简介:${item.vt}</p>
                <p>时长:${second_to_minute(item.timeLength)}</p>
                <p>上映时间:${timestamp_to_time(item.publishTime)}</p>
            </li>`
            }, '');


            // 将当前第几页同步到页面上  

            // 将总共多少页也同步到页面上 
            total = Math.ceil(videos.length / pagesize);
            contentBox.innerText = `${current} / ${total}`
            // 上一页 下一页是否能用  

            prevBtn.className = current == 1?'prev disable':'prev'
            nextBtn.className = current == total?'next disable':'next'
            
            selectBtn.value = pagesize;
        
        }

        handle_page(); // 打开页面默认渲染第一页 每页4条


        // 点击上一页 
        // 给这个按钮绑定一个事件  
        prevBtn.onclick = function(){
            if(current ===1) return 
            current--;
            handle_page()
        }


        // 点击下一页  
        nextBtn.onclick = function(){
            if(current === total) return 
            current++;
            handle_page();

        }

        // 点击下拉框  

        selectBtn.onchange =function(){
            pagesize = selectBtn.value - 0;
            // 保证pagesize 的结果是数值类型  
            current = 1;
            handle_page();

        }

        
    </script>

</body>

</html>